// import { Swiper, SwiperSlide } from 'swiper/react'
import { useEffect, useState } from 'react'
import { twMerge } from 'tailwind-merge'
import { useSize } from 'ahooks'

const Journey = () => {
  const [activeIndex, setActiveIndex] = useState(0)
  const [bodyElement, setBodyElement] = useState(null)
  const size = useSize(bodyElement)

  // const handleSlideChange = (swiper: any) => {
  //   setActiveIndex(swiper.activeIndex);
  // }

  useEffect(() => {
    // @ts-ignore
    setBodyElement(document.querySelector('body'))
  }, [])

  return (
    <section data-index='2' className='section bg-white'>
      <div className='w-[1650px] max-1650:w-auto pt-[40px] md:pt-[60px] lg:pt-[80px] px-[10px] lg:px-[20px] 2xl:px-0 mx-auto'>
        <h2 className='flex items-center pb-[10px] md:pb-[32px] border-b mb-[20px] md:mb-[64px]'>
          <span className='size-[10px] md:size-[14px] rounded-full border md:border-2 border-[#0C4E99]'></span>
          <p className='text-[18px] md:text-[24px] leading-[18px] md:leading-[24px] ml-[5px] md:ml-[10px] text-[#333]'>发展历程</p>
        </h2>
        {/* <Swiper className='flex pb-[20px!important] md:pb-[96px!important]' onSlideChange={handleSlideChange} slidesPerView={(size?.width ?? 0)  > 786 ? 'auto' : 1} spaceBetween={(size?.width ?? 0)  > 786 ? 16 : 0}>
          {Array(5).fill('1').map((item, index) => (
            <SwiperSlide className={twMerge('cursor-pointer select-none w-auto md:w-[264px!important]', activeIndex === index && 'w-full md:w-[528px!important]')} key={index} onClick={() => {
              setActiveIndex(index)
            }}>
              <div className={twMerge('size-[264px] border borer-[#666] rounded-[20px] px-[32px] py-[44px] bg-[length:100%_100%] bg-no-repeat', activeIndex === index && 'w-full md:w-[528px] h-[264px] py-[35px] bg-[url(/images/home/WechatIMG1004.jpg)]')}>
                <p className={twMerge('text-[#0C4E99] font-bold text-[36px] leading-[28px] mb-[26px]', activeIndex === index && 'bg-[#0D4F9A] text-white text-[32px] w-fit pr-[22px] mb-[20px] font-normal rounded-r-full relative before:absolute before:left-[-32px] before:top-0 before:bottom-0 before:w-[32px] before:bg-[#0D4F9A]')}>2015-2016</p>
                <p className={twMerge('text-[20px] text-[#020202] leading-[24px]', activeIndex === index && 'text-white w-auto')}>公众号时代兴起</p>
                <p className={twMerge('text-[20px] text-[#020202] leading-[24px] mb-[20px]', activeIndex === index && 'text-white w-auto')}>拓展全学科保研</p>
                <p className={twMerge('w-[190px] pointer-events-none text-[15px] text-[#787878] leading-[21px] h-[60px] overflow-y-auto', activeIndex === index && 'text-white w-auto')}>保研人公众号诞生，全面推动保研信息分享转向“公众号”时代同时，保研服务陆续拓科至全学科，形成了各学科独特的保研辅导方案。恰逢保研政策改革，保研辅导行业规模蓬勃发展。</p>
              </div>
            </SwiperSlide>
          ))}
        </Swiper> */}
        <div className='relative overflow-x-auto pb-[20px] lg:pb-[96px]'>
          <ul className='block lg:flex lg:w-fit lg:space-x-[16px] space-y-[10px] lg:space-y-0 lg:max-h-[268px] lg:h-auto relative'>
            {Array(5).fill('0').map((item, index) => (
              <li className={twMerge('cursor-pointer select-none w-auto lg:w-[264px]', activeIndex === index && 'w-full lg:w-[528px]')} key={index} onClick={() => {
                setActiveIndex(index)
              }}>
                <div className={twMerge('border borer-[#666] rounded-[20px] px-[10px] lg:px-[30px] py-[15px] sm:py-[20px] md:py-[40px] lg:py-[34px] bg-white bg-[length:100%_100%] bg-no-repeat', activeIndex === index && 'w-full lg:w-[528px] px-[10px] lg:px-[32px] py-[15px] sm:py-[20px] md:py-[40px] lg:py-[27px] bg-[url(/images/home/WechatIMG1004.jpg)]')}>
                  <p className={twMerge('text-[#0C4E99] font-bold text-[20px] sm:text-[30px] lg:text-[36px] leading-[20px] lg:leading-[28px] mb-[10px] sm:mb-[20px] lg:mb-[26px]', activeIndex === index && 'bg-[#0D4F9A] text-white text-[20px] md:text-[32px] w-fit pr-[22px] lg:py-[10px] mb-[10px] lg:mb-[20px] rounded-r-full relative before:absolute before:left-[-10px] lg:before:left-[-32px] before:top-0 before:bottom-0 before:w-[10px] lg:before:w-[32px] before:bg-[#0D4F9A]')}>2015-2016</p>
                  <p className={twMerge('text-base sm:text-[20px] text-[#020202] leading-[20px] sm:leading-[24px]', activeIndex === index && 'text-white')}>公众号时代兴起</p>
                  <p className={twMerge('text-base sm:text-[20px] text-[#020202] leading-[20px] sm:leading-[24px] mb-[10px] sm:mb-[15px] lg:mb-[20px]', activeIndex === index && 'text-white')}>拓展全学科保研</p>
                  <p className={twMerge('lg:w-[190px] pointer-events-none text-xs line-clamp-3 sm:text-base text-[#787878] lg:leading-[21px] overflow-y-auto', activeIndex === index && 'text-white lg:w-auto')}>保研人公众号诞生，全面推动保研信息分享转向“公众号”时代同时，保研服务陆续拓科至全学科，形成了各学科独特的保研辅导方案。恰逢保研政策改革，保研辅导行业规模蓬勃发展。</p>
                </div>
              </li>
            ))}
          </ul>
          {/* <div className='hidden 2xl:block size-[40px] bg-[url(/images/home/arrow-gray.png)] bg-no-repeat bg-contain absolute left-0 md:left-[-50px] top-[110px] cursor-pointer select-none' onClick={() => {
            setActiveIndex(activeIndex - 1)
          }}></div>
          <div className='hidden 2xl:block size-[40px] bg-[url(/images/home/arrow-blue.png)] bg-no-repeat bg-contain absolute right-0 md:right-[-50px] top-[110px] cursor-pointer select-none' onClick={() => {
            setActiveIndex(activeIndex + 1)
          }}></div> */}
        </div>
      </div>
    </section>
  )
}

export default Journey